<template>
  <el-form v-if="config.length > 0" ref="formRef" class="search-form" :model="modelValue">
    <div
      v-for="(control, index) in config"
      v-show="moreChecked.includes(control.prop)"
      :key="index"
      class="column"
      :style="{ width: control.columnWidth || columnWidth, ...columnStyle }"
    >
      <!-- customizeColumn slots: 代表整列都要自定义 -->
      <slot v-if="control.customizeColumn" :name="control.customizeColumn"></slot>
      <div v-else class="column__inner">
        <ControlLabel
          v-if="labelState(control)"
          :control="control"
          :labelWidth="labelWidth"
          :labelStyle="labelStyle"
        >
          <template v-for="slotName in slotsListLabel" v-slot:[slotName]>
            <slot :name="slotName" />
          </template>
        </ControlLabel>
        <el-form-item class="form-item" :prop="control.prop">
          <!-- slots: 控制el-form-item插槽 -->
          <slot v-if="control.slots" :name="control.slots"></slot>
          <!-- v-on必须提供一个对象属性绑定 -->
          <component
            :is="controlMap[control.component] || control.component"
            v-else
            :modelValue="modelValue[control.prop]"
            :form="modelValue"
            v-bind="control"
            v-on="control.events || {}"
            @update:modelValue="(value) => valueChange(value, control)"
          >
            <template v-for="slotName in slotsList" v-slot:[slotName]>
              <slot :name="slotName" />
            </template>
          </component>
        </el-form-item>
      </div>
    </div>
    <div :style="columnButtonStyle" class="column whitespace-nowrap">
      <el-button type="primary" class="button button--search" @click="search">查询</el-button>
      <el-button class="button button--reset" @click="reset">重置</el-button>
      <template v-if="showNumberMax !== 0">
        <el-popover :width="200" trigger="hover" placement="bottom" :teleported="false">
          <div class="more-list">
            <el-checkbox-group v-model="moreChecked" class="p-t-2 p-l-8 p-r-8 p-b-4">
              <template v-for="(item, index) in moreControlList" :key="index">
                <el-checkbox :label="item.label" :value="item.value" /><br />
              </template>
            </el-checkbox-group>
          </div>
          <template #reference>
            <el-button class="button" :icon="Filter">更多筛选</el-button>
          </template>
        </el-popover>
      </template>
    </div>
  </el-form>
</template>

<script setup>
import { controlMap } from "./components";
import ControlLabel from "./Label.vue";
import { Filter } from "@element-plus/icons-vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({}),
  },
  /** @description 每个控件的配置集合 **/
  config: {
    type: Array,
    default: () => [],
  },
  /** @description 每个控件默认占据的空间大小 **/
  columnWidth: {
    type: String,
    default: "25%",
  },
  /** @description 每个控件的默认样式 **/
  columnStyle: {
    type: Object,
    default: () => ({}),
  },
  /** @description 搜索按钮、重置按钮、更多筛选按钮配置 **/
  columnButtonStyle: {
    type: Object,
    default: () => ({}),
  },
  /** @description 每个控件的label是否展示 **/
  labelHidden: {
    type: Boolean,
    default: false,
  },
  /** @description 每个控件的label文本宽度 **/
  labelWidth: {
    type: String,
    defalut: "",
  },
  /** @description 每个控件的label文本样式 **/
  labelStyle: {
    type: Object,
    default: () => ({}),
  },
  /** @description 显示控件的数量，默认为0，即全部展示 **/
  showNumberMax: {
    type: Number,
    default: 0,
  },
});
const emits = defineEmits(["update:modelValue", "search", "reset"]);

const valueChange = (value, control) => {
  let result = { ...props.modelValue };
  if (typeof value === 'function') {
    result = {
      ...result,
      ...value(),
    }
    console.log(result)
  }else {
    result[control.prop] = value;
  }
  emits("update:modelValue", Object.assign(props.modelValue, result));
};

const slots = useSlots();
const slotsList = computed(() =>
  Object.keys(slots).filter((slotName) => {
    if (slotName.startsWith("label-")) return false;
    return slotName !== "default";
  }),
);
const slotsListLabel = computed(() =>
  Object.keys(slots).filter((slotName) => slotName.startsWith("label-")),
);

/** @name 控制Label组件的显示与隐藏 **/
const labelState = computed(() => (control) => {
  // 1. 如果label没有值，则直接隐藏，优先级最高
  // 2. 每个控件的control.labelHidden属性，可单独控制组件是否展示，优先级次之
  // 3. 全局的labelHidden属性，可控制所有控件的label是否展示，优先级最低
  if (!control.label) return false;
  if (control.labelHidden) return false;
  if (props.labelHidden) return false;
  return true;
})

const formRef = ref();

const search = () => {
  emits("search", props.modelValue);
};
const reset = () => {
  if (!formRef) return;
  formRef.value.resetFields();
  emits("search", props.modelValue);
};

/** @name 更多筛选 **/
const moreChecked = ref(
  props.config
    .filter((item, index) => {
      if (props.showNumberMax > 0 && index >= props.showNumberMax) {
        return false;
      }
      return true;
    })
    .map((item) => item.prop),
);
const moreControlList = computed(() => {
  return props.config.map((item) => ({
    label: item.label || item.placeholder,
    value: item.prop,
  }));
});
</script>

<style lang="scss" scoped>
$height: 40px;
$backgroundColor: #232327;
.search-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 16px 8px 0 16px;
  overflow-x: auto;
  .column {
    width: 25%;
    box-sizing: border-box;
    padding-right: 16px;
    margin-bottom: 16px;
    height: $height;
  }
  .column__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: $backgroundColor;
    border-radius: 4px;
    overflow: hidden;
  }
  .form-item {
    flex: 1;
    width: 100%;
  }
  .button {
    width: 100px;
    height: $height;
    &.button--search,
    &.button--reset {
      width: 90px;
    }
  }
  .more-list {
    max-height: 200px;
    overflow-y: auto;
    /* #if MODE === "market" */
    @include base-scrollbar;
    /* #endif */
  }
}
.search-form {
  :deep() {
    .el-form-item {
      margin-bottom: 0;
    }
    .el-input__wrapper,
    .el-select__wrapper {
      background-color: transparent;
      box-shadow: none;
    }
    .el-range-separator {
      color: #999999;
    }
  }
}
</style>
